import React from 'react'

import { QRCode } from 'antd';
import { TabletOutlined } from '@ant-design/icons';
import './index.css'

export default function Index(props) {

    let footerData = [
        {
            title: '700亿+',
            text: '作品传播次数'
        }, {
            title: '3亿+',
            text: '累计作品数'
        }, {
            title: '6500万+',
            text: '累计注册用户'
        }, {
            title: '100万+',
            text: '正版模块素材'
        }, {
            title: '3000+',
            text: '安全运行天数'
        }
    ]

    let footerDataList = [
        {
            title: '产品矩阵',
            list: [
                'H5',
                '海报',
                '长页',
                '表单',
                '互动',
                '视频',
                '电子画册',
            ]
        },
        {
            title: '创意工具',
            list: [
                '红包',
                '打赏',
                '短信通知',
                '二维码美化',
                '智能抠图',
                '文字云',
                '拼图',
                '智能海报',
                '一键快闪',
            ]
        },
        {
            title: '灵感交流',
            list: [
                '用户社区',
                '创意课堂',
                '客户案例',
                '精选推荐',
                '热门作品',
                '营销日历',
            ]
        },
        {
            title: '服务帮助',
            list: [
                '审核规则',
                '作品审核',
                '网站地图',
                '热门模板',
                '客服中心',
                '帮助中心',
                '隐私协议',
            ]
        },
        {
            title: '合作伙伴',
            list: [
                '设计师招募',
                '合伙人招募',
                '正版素材商',
                '内容中台',
                '内容安全审核',
            ]
        },
        {
            title: '公司信息',
            list: [
                '关于我们',
                '人才招聘',
                '公司动态',
                '荣誉奖项',
                '商务合作',
            ]
        },
        {
            title: '社交媒体',
            list: [
                '微信公众号',
                '官方微博',
                '视频号',
            ]
        }
    ]
    return (
        <div className='footer-ext'>

            <div className='footer-divisionLine'>

            </div>

            <div className='footer-content'>
                <div className='content-info'>
                    <div className='info-logo'>
                        <img
                            src="https://lib.eqh5.com/eqx.layout/images/new_logo.svg"
                            alt=""
                        />
                    </div>
                    <div className='info-logo-desc'>
                        全球1000强,中国100强企业
                    </div>
                    <ul className='info-general'>
                        {
                            footerData.map((item, index) => {
                                return (
                                    <li key={index}>
                                        <h1>
                                            {item.title}
                                        </h1>
                                        <p>
                                            {item.text}
                                        </p>
                                    </li>
                                )
                            })
                        }
                    </ul>

                </div>

                <div className='content-nav'>
                    <div className='footer-placeholder-line'></div>
                    <div className='footer-placeholder'></div>
                    <div className='nav-content'>
                        {
                            footerDataList.map((item, index) => {
                                return (
                                    <div key={index} className='footer-box'>
                                        <p className='footer-box-title'>
                                            {item.title}
                                        </p>
                                        <ul className='footer-box-content'>
                                            {
                                                item.list.map((items, indexer) => {
                                                    return (
                                                        <li className='desc' key={indexer}>
                                                            {items}
                                                        </li>
                                                    )
                                                })
                                            }
                                        </ul>
                                    </div>
                                )
                            })
                        }
                    </div>
                    <div className='footer-placeholder-line'></div>
                    <div className='footer-placeholder'></div>
                </div>

                <div className='content-qrCode'>
                    <div className='qrCode-title'>

                        <span>
                            <TabletOutlined />
                            手机APP
                        </span>

                        <p>
                            扫描注册 3分钟做出好设计
                        </p>
                    </div>

                    <div className='qrCode'>
                        <QRCode
                            errorLevel="H"
                            value="天王盖地虎，宝塔镇河妖"
                            icon="https://lib.eqh5.com/images/favicon.ico"
                        />
                    </div>


                </div>
            </div>

            <div className='prompt'>
                <div className='prompt-title'>
                    <span>
                        友情链接
                    </span>

                </div>
                <div className='prompt-link'>
                    <ul>
                        <li>
                            <span>热门模板</span>
                        </li>
                    </ul>

                </div>
            </div>

            <div className='company-info'>
                <div className='left-info'>
                    <div>
                        © 2024 eqxiu.com. All rights reserved 北京中网易企秀科技有限公司
                    </div>
                    <div>
                        电信与信息服务业务经营许可证：京ICP证160037号 | 京ICP备15056244号 | 京公网安备11010802018300
                    </div>
                </div>
                <div className='approve-info'>
                    <img
                        src="https://lib.eqh5.com/eqx.layout/images/brand_bottom_large.jpg"
                        alt=""
                    />
                    <img
                        src="https://lib.eqh5.com/eqx.layout/images/kexin.svg"
                        alt=""
                    />
                </div>
            </div>

        </div>
    )
}
